<template>
	<view class="zg-area">
		<!-- 团购列表 -->
		<view class="tg-content" v-if="list.length > 0">
			<view class="tg-item" v-for="(item,index) in list" :key="index">
				<view class="tg-item-left">
					<image v-for="(item1,index1) in item.ptAdds" :key="index1" :src="item1.customerAvatar"  mode="aspectFill"></image>
				</view>
				<view class="tg-item-right">
					<view class="tir-1">
						<view class="tir-1-title">
							还剩<text>{{item.successNumber - item.currentNumber}}人</text>拼成
						</view>
						<view class="tir-1-content">
							剩余{{item.f_time}}
						</view>
					</view>
					<view class="tir-2">
						<button plain :disabled="item.f_time === '活动已结束'" @click="buy2(item)">去拼单</button>
					</view>
				</view>
			</view>
		</view>
		<view class="nomore" v-if="list.length === 0 && !loading">
			<view class="nomore-text">
				<image src="/pagesShop/static/zanwu.png" mode="widthFix"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	
	export default {
		data() {
			return {
				cid: '',
				list: [],
				loading: false,
				timer2: null,
				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 15, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				nowlist:[]
			}
		},
		computed:{
			...mapGetters(['getToken']),
		},
		onLoad(params) {
			console.log(params);
			this.cid = params.cid || ''
			if(this.cid) {
				this.getList1()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.loadMoreText = "加载中..."
			this.getList1()
		},
		// 上拉触底
		onReachBottom() {
			console.log(this.pageNum)
			console.log(this.last_page)
			if (this.pageNum < this.last_page) {
				this.showLoadMore = true;
				this.pageNum++
				this.getList1()
				}
		},
		methods: {
			formatTime2() {
				this.timer2 = setInterval(() => {
					this.list.map((item,index) => {
						const time = this.computeTime(item.endTime)
						// console.log(time);
						this.$set(this.list[index],'f_time',time)
					})
				},1000)
			},
			// 计算列表倒计时
			computeTime(finishTime) {
				finishTime = finishTime.replace(/-/g,"/")
				if(typeof finishTime === 'string' && new Date(finishTime).toString() !== 'Invalid Date') {
					const now_time = new Date().getTime()
					const finish_time = new Date(finishTime).getTime()
					const sy_time = finish_time-now_time
					if(sy_time > 0) {
						 // 时
						const hour = Math.floor( sy_time / (1000*60*60) ).toString().padStart(2,'0')
						const sy_time1 = Math.floor( sy_time % (1000*60*60) )
						// 分
						const min = Math.floor( sy_time1 / (1000*60) ).toString().padStart(2,'0')
						const sy_time2 = Math.floor( sy_time1 % (1000*60) )
						// 秒
						const sec = Math.floor( sy_time2 / (1000) ).toString().padStart(2,'0')
						// 剩余时间
						const time_str = `${hour}:${min}:${sec}`
						return time_str
					} else {
						return '拼团已结束'
					}
				} else {
					return '无效的结束时间'
				}
			},
			// 获取团购列表
			getList1() {
				this.loading = true
				this.$http.post(this.$api.shop_list_3 + '?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize, {}, {
					params: {
						id: this.cid
					}
				}).then(result => {
					uni.stopPullDownRefresh();
					this.showLoadMore = false;
					this.loading = false
					if(result.code === 200) {
						this.last_page = result.data.pageTotal
						result.data.result.forEach(item => {
							item.ptAdds.forEach(it => {
								if (!it.customerAvatar.startsWith('http')) {
									it.customerAvatar = this.$imgUrl + it.customerAvatar
								}
							}) 
						})
						let list = []
						 if(this.pageNum > 1){
							  list = list.concat(result.data.result);
						}else{
							list = result.data.result
						} 
						console.log(list,'list')
						this.list = list.map(item => {
							item.f_time = ''
							return item
						})
						this.formatTime2();
					} else {
						this.list = []
					}
				}).catch(() => {
					this.loading = false
					this.list = []
				})
			},
			buy2(item) {
				if (!this.cid) {
					uni.showToast({
						title: '商品id错误',
						icon: 'none'
					})
					return
				}
				if(item.f_time === '拼团已结束') {
					uni.showToast({
						title: '拼团已结束',
						icon: 'none'
					})
					return
				}
				uni.$emit('add-tg',item)
				setTimeout(() => {
					uni.navigateBack()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tg-content {
		padding: 0 30rpx;
	}
	
	.tg-item {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	.tg-item-left {
		width: 290rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		
		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}

	.tg-item-right {
		display: flex;
		align-items: center;

		button {
			font-size: 24rpx;
			background-color: #FFAF3C;
			color: #fff;
			border-radius: 0;
			padding: 10rpx;
			margin-left: 20rpx;
			
			&:disabled {
				opacity: 0.5;
			}
		}
	}

	.tir-1-title {
		text {
			color: $uni-color-error;
		}
	}

	.tir-1-content {
		color: #999;
	}
</style>
